<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit">
	<link rel="stylesheet" href="library/layui/css/layui.css">
	<link rel="stylesheet" href="library/doc.css">
	<link rel="stylesheet" href="dropdown.css">
	<title>Dropdown</title>
</head>
<body>
<div class="doc-layout">
	<div class="doc-side">
		<h1>Dropdown</h1>
		<h2>文档目录</h2>
		<ul>
			<li><a href="#demo1" title="演示">演示</a></li>
			<li><a href="#parm" title="使用方法">使用方法</a></li>
			<li><a href="#uplog" title="更新日志">更新日志</a></li>
		</ul>
		<h2>AUTHOR</h2>
		<ul>
			<li><a href="https://gitee.com/lolicode" target="_blank">@sakuya</a></li>
		</ul>
	</div>
	<div class="doc-content" id="doc-content">
		<div class="layui-main">
			<h1 class="doc-h1">LAYUI - Dropdown</h1>
			<div class="layui-text">
				Dropdown 下拉组件
			</div>
			
			<fieldset class="layui-elem-field layui-field-title" id="demo1"><legend>触发方式</legend></fieldset>
			<div class="layui-text">
				<p>默认为鼠标移入事件，当然可以添加类 <em>.dropdown-click</em> 让其改为点击事件</p>
			</div>
			
			<div class="layui-dropdown">
				<button class="layui-btn layui-btn-primary">Hover me</button>
				<ul>
					<li>
						<a href="javascript:;">1st menu item</a>
					</li>
					<li>
						<a href="javascript:;">2nd menu item</a>
					</li>
					<hr>
					<li>
						<a href="javascript:;">3rd menu item</a>
					</li>
				</ul>
			</div>
			
			<div class="layui-dropdown dropdown-click">
				<button class="layui-btn layui-btn-primary">Click me</button>
				<ul>
					<li>
						<a href="javascript:;">1st menu item</a>
					</li>
					<li>
						<a href="javascript:;">2nd menu item</a>
					</li>
					<hr>
					<li>
						<a href="javascript:;">3rd menu item</a>
					</li>
				</ul>
			</div>
			
			<fieldset class="layui-elem-field layui-field-title" id="demo2"><legend>对齐方式</legend></fieldset>
			<div class="layui-text">
				<p>默认为与元素左对齐，当然可以添加类 <em>.dropdown-right</em> 让其改为右对齐。另外，组件将自动识别上下显示位置。</p>
			</div>
			
			<div class="layui-dropdown">
				<button class="layui-btn layui-btn-primary">默认</button>
				<ul>
					<li>
						<a href="javascript:;">1st menu item</a>
					</li>
					<li>
						<a href="javascript:;">2nd menu item</a>
					</li>
					<hr>
					<li>
						<a href="javascript:;">3rd menu item</a>
					</li>
				</ul>
			</div>
			
			<div class="layui-dropdown dropdown-right">
				<button class="layui-btn layui-btn-primary">设置为右对齐</button>
				<ul>
					<li>
						<a href="javascript:;">1st menu item</a>
					</li>
					<li>
						<a href="javascript:;">2nd menu item</a>
					</li>
					<hr>
					<li>
						<a href="javascript:;">3rd menu item</a>
					</li>
				</ul>
			</div>
			
			<fieldset class="layui-elem-field layui-field-title" id="demo2"><legend>标题和禁用样式</legend></fieldset>
			<div class="layui-text">
				<p>可以添加标题标签 <em>&lt;h4&gt;HEADER&lt;/h4&gt;</em> 和禁用类 <em>li.dropdown-item-disabled</em></p>
			</div>
			
			<div class="layui-dropdown">
				<button class="layui-btn layui-btn-primary">Button</button>
				<ul>
					<h4>HEADER</h4>
					<li>
						<a href="javascript:;"><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a>
					</li>
					<li class="dropdown-item-disabled">
						<a href="javascript:;"><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a>
					</li>
					<hr>
					<h4>HEADER</h4>
					<li>
						<a href="javascript:;"><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a>
					</li>
				</ul>
			</div>
			
			<fieldset class="layui-elem-field layui-field-title" id="demo2"><legend>各种类型</legend></fieldset>
			<div class="layui-text">
				<p>基本可以配合LAYUI的按钮，和其他你所能想到的元素，发挥想象可以让大象起飞。</p>
			</div>
			
			<div class="layui-dropdown">
				<button class="layui-btn layui-btn-normal">百搭按钮</button>
				<ul>
					<li>
						<a href="javascript:;">1st menu item</a>
					</li>
					<li>
						<a href="javascript:;">2nd menu item</a>
					</li>
					<hr>
					<li>
						<a href="javascript:;">3rd menu item</a>
					</li>
				</ul>
			</div>
			
			<div class="layui-dropdown dropdown-disabled">
				<button class="layui-btn layui-btn-normal layui-btn-disabled" disabled>禁用按钮</button>
				<ul>
					<li>
						<a href="javascript:;">1st menu item</a>
					</li>
					<li>
						<a href="javascript:;">2nd menu item</a>
					</li>
					<hr>
					<li>
						<a href="javascript:;">3rd menu item</a>
					</li>
				</ul>
			</div>

			<div class="layui-dropdown">
				<button class="layui-btn layui-btn-primary">自定义内容</button>
				<ul style="width:250px;padding:0 10px 10px 10px;">
					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
						<ul class="layui-tab-title">
							<li class="layui-this">HTTPS</li>
							<li>SSH</li>
						</ul>
						<div class="layui-tab-content" style="padding:10px 0 0 0;">
							<div class="layui-tab-item layui-show">
								<input type="text" class="layui-input layui-disabled" value="https://gitee.com/lolicode/layui_component__dropdown.git">
							</div>
							<div class="layui-tab-item">
								<input type="text" class="layui-input layui-disabled" value="git@gitee.com:lolicode/layui_component__dropdown.git">
							</div>
						</div>
					</div>
					<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid">Download ZIP</button>
				</ul>
			</div>
			<div class="layui-dropdown">
				<div class="layui-input-inline">
					<input type="text" placeholder="一个会跳舞的输入框" class="layui-input">
				</div>
				<ul>
					<h4>是不是在找</h4>
					<li>
						<a href="javascript:;">另一个会跳舞的下拉框</a>
					</li>
					<li>
						<a href="javascript:;">一杯忧郁的可乐</a>
					</li>
				</ul>
			</div>
			
			<fieldset class="layui-elem-field layui-field-title" id="parm"><legend>核心方法和参数</legend></fieldset>
			<div class="layui-text">
				<p>dropdown最核心的一个方法就是 <em>dropdown.render()</em></p>
			</div>
			<pre class="layui-code" lay-encode="true">
			//1、加载CSS
			<link rel="stylesheet" href="dropdown.css">
			    
			//2、组件使用
			layui.use(['dropdown'], function(){
				    //只要use就行，组件会自动渲染，如果是后期append到DOM结构中的元素需要再次渲染
				    //var dropdown = layui.dropdown;
				    //dropdown.render();
			});
			</pre>

			<fieldset class="layui-elem-field layui-field-title" id="uplog"><legend>更新日志</legend></fieldset>
			<ul class="layui-timeline">
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">2019/01/25 初始版本</div>
					</div>
				</li>
			</ul>
				
		</div>
	</div>
</div>

<script type="text/javascript" src="library/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['element', 'code', 'dropdown'], function(){
	layui.code();
});
</script>
</body>
</html>